import React from 'react';
import { Text, View, Image, TouchableOpacity } from 'react-native';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Feather';
import styles from './styles';
import { addStars } from '../../../utils';

export default ({ data = {} }) => {
  const { name, avatar, mobile } = data;
  
  const edit = () => {
    Actions.editUserInfo();
  };
  return (
    <View style={styles.header}>
      {avatar ? (
        <Image style={styles.avatar} source={{ uri: avatar }} />
      ) : (
        <View style={[styles.avatar, styles.avatarDef]}>
          <Text>头像</Text>
        </View>
      )}

      <View style={styles.center}>
        <Text style={styles.name}>
          {name || (mobile && addStars(mobile, 3, 6)) || '佚名'}
        </Text>
        <Text style={styles.pointWrap}>
          积分 <Text style={styles.point}>0</Text>
        </Text>
      </View>
      <TouchableOpacity style={styles.editBtn} onPress={edit}>
        <Icon name="edit" size={22} color="#39f" />
        <Text style={{ color: '#39f' }}>编辑</Text>
      </TouchableOpacity>
    </View>
  );
};
